<!doctype html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link href="./static/ai/css/bootstrap.min.css" rel="stylesheet">
    <link href="./static/ai/css/iconfont/iconfont.css" rel="stylesheet">
    <script src="./static/ai/js/jquery.min.js"></script>
    <script src="./static/ai/js/bootstrap.bundle.min.js"></script>
    <title>AI聊天</title>
    <meta name="keywords" content="免费ChatGPT,AI文章写作,AI软件工具,文案论文" />
    <meta name="description" content="免费ChatGPTAI小新自动写作平台，免费ChatGPT智能AI写文章工具，AI论文辅助、文案稿、诗词、小说、剧本、代码程序、作文助手。改写、续写、伪原创、降重在线神器" />
</head>

<body class="bg-light ready sticky overflow-hidden">
    <link rel="stylesheet" href="./static/ai/css/app.css?v=v=1693705021">
    <div class="h-100 d-flex align-items-center justify-content-center" id="app">
        <div class="loading" v-if="showLoading">
            <div class="dot dot1"></div>
            <div class="dot dot2"></div>
            <div class="dot dot3"></div>
        </div>
        <div class="container-fluid h-100 d-flex bg-white shadow-sm" :class="{'small-window':isSmallWindow}" v-cloak @click="hideAll">
            <!-- 左侧工具栏 -->
            <div class="left-bar border-right">
                <img :src="loginUser.avatar" class="avatar shadow-sm" @click="switchModule('user')">
                <div class="mt-4 iconfont iconfont-bg" :class="{selected:module==='chat'}" @click="switchModule('chat')">
                    {{module==="chat"?"&#xe60f;":"&#xe60f;"}}
                </div>
 
                <div class="mt-4 iconfont iconfont-bg" :class="{selected:module==='me'}" @click="switchModule('me')">
                    {{module==="me"?"&#xe7ae;":"&#xe7ae;"}}
                </div>
     
                <div class="mt-4 iconfont iconfont-bg" :class="{selected:module==='market'}" @click="switchModule('market')">
                    {{module==="market"?"&#xe611;":"&#xe611;"}}
                </div>
                <div class="d-flex align-items-center justify-content-center flex-column pb-3">
                    <div class="mt-4 iconfont iconfont-bg" @click="saveData('smallWindow' , smallWindow=!smallWindow)">
                        {{smallWindow?"&#xe616;":"&#xe60e;"}}
                    </div>
             
                    <div class="mt-4 iconfont iconfont-bg" :class="{selected:module==='setting'}" @click.stop="box.showMore=!box.showMore">
                        {{module==="setting"?"&#xe61b;":"&#xe61b;"}}
                    </div>
                </div>
            </div>

            <!-- 对话列表 -->
            <div class="chat-bar" v-show="showAddressBook&&module==='chat'">
                <div class="p-3 d-flex align-items-center">
                    <input class="form-control form-control-sm bg-light" type="text" v-model="keyword" placeholder="搜索">
                    <!--<button class="btn btn-sm btn-light border ml-2 mr-0 f15 font-weight-bold add-btn" @click.stop="showRoleInfoBox"><span class="iconfont p-0">&#xe668;</span></button>-->
                </div>
                <div class="chat-list">
                    <template v-for="item in filter">
                    <div class="item" @click="switchRoleId(item.roleId)" :class="{selected: roleId==item.roleId, 'shadow-selected':contextMenu.roleId==item.roleId}" @contextmenu.prevent="openContextMenu(item.roleId, $event)">
                    <div class="d-flex">
                        <img class="avatar" :src="item.avatar+'?v=3.0'" alt="avatar"/>
                        <div class="ml-2">
                        <div class="name">{{item.name}}</div>
                        <div class="desc">{{item.desc}}</div>
                        </div>
                    </div>
                    <div class="text-right text-secondary f12">
                        <div style="height:1.3rem">{{formatDate(item.lastTime)}}</div>
                        <div class="iconfont" v-if="item.pinned">&#xe677;</div>
                    </div>
                    </div>
                </template>
                </div>
            </div>

            <!-- 聊天框 -->
            <div class="chat-box" :style="{width:showAddressBook?'calc(100% - 250px)':'100%'}" :class="{'slide-in': isSlidedIn, 'slide-out': isSlidedOut}" v-show="(!isMobile || !showAddressBook) && module==='chat'">
                <div class="header d-flex justify-content-between" @click="scrollToTop()">
                    <b class="iconfont" @click="slideOut" v-show="isMobile">&#xe601;</b>
                    <span v-html="chat.name"></span>
                    <b class="iconfont" @click.stop="editRole(roleId)">⋯</b>
                </div>
                <div class="body">
                    <ul class="list-unstyled overflow-auto h-100 mb-0 message-list" ref="messageBox">
                        <template v-for="message in chat.messages">
                        <li class="d-flex mt-4" :class="{'flex-row-reverse':message.role=='user'}">
                            <img class="avatar" alt="avatar" :src="message.role!=='user'?chat.avatar:loginUser.avatar" width="40" height="40">
                            <div class="position-relative d-flex align-items-center" @mouseenter="hoverMessageId=message.id" @mouseleave="hoverMessageId=0">
                            <div class="card mx-2 markdown-body alert"
                                :class="{'alert-success':message.role==='user'}"
                                v-html="markdown(message.choices[0].delta.content)||(!message.completed?'<b class=\'animate-blink\'>|</b>':'')"
                            >
                            </div>
                            <div class="p-1 bg-white rounded shadow-sm position-absolute" style="top:-20px;" v-show="hoverMessageId===message.id" :style="message.role==='user'?'left:0':'right:0'">
                                <span class="iconfont block-copy iconfont-bg" @click="copyToClipboard(message.choices[0].delta.content)"></span>
                                <span class="iconfont p-1 iconfont-bg" @click="deleteMessage(message.id)">&#xe8b6;</span>
                            </div>
                            </div>
                        </li>
                        </template>
                    </ul>
                    <div class="stop-btn">
                        <button type="button" class="btn btn-sm btn-outline-secondary" v-show="chat.loading" @click="cancel" style="display: none">停止</button>
                    </div>
                </div>
                <div class="footer" v-show="chat.name">
                    <div class="tools" @click="scrollToBottom(true)">
                        <span class="iconfont chat-tools-item iconfont-bg" title="清除消息" @click.stop="destroy">&#xe946;</span>
                        <span class="iconfont chat-tools-item iconfont-bg" title="参数调整" :class="{selected:box.showParams}" @click.stop="showPanel('Params')">&#xe607;</span>
                        <span class="iconfont chat-tools-item float-right f20 d-none d-md-block iconfont-bg" title="发送方式" :class="{selected:box.showSendMethod}" @click.stop="showPanel('SendMethod')">&#xe91c;</span>
                    </div>
                    <textarea class="input" :rows="!isMobile?6:2" placeholder="请在这输入你的问题" v-model="chat.content" @keypress="handleEnter" ref="input" @focus="handleInputFocus"></textarea>
                    <div class="send-btn d-flex align-items-center">
                        <button class="btn btn-sm btn-success px-3 ml-3" :disabled="chat.loading||!chat.content" @click="sendMessage">发送</button>
                    </div>
                </div>
            </div>

            <div class="overlay bg-transparent" v-show="showShadowLayer&&module==='chat'" @contextmenu.prevent="hideAll">
                <!-- 对话列表右键菜单 -->
                <div class="position-fixed shadow bg-white p-2 rounded cursor-pointer" @click.stop :style="{top:contextMenu.top+'px', left:contextMenu.left+'px'}" v-show="box.showContextMenu">
                    <a class="dropdown-item iconfont" @click="pinRole()">&#xe62a; 置顶</a>
                    <a class="dropdown-item iconfont" @click="editRole()">&#xec7c; 编辑</a>
                    <a class="dropdown-item iconfont" @click="deleteRole()">&#xe8b6; 删除</a>
                </div>

                <!-- 参数设置 -->
                <div class="params-box border shadow slide-up" @click.stop v-show="box.showParams" :style="{left:showAddressBook?'170px':'0'}">
                    <div class="font-weight-bolder mt-1 mb-3">参数调整</div>
                    <form>
                        <div class="form-group row align-items-center">
                            <label for="Model" class="col-sm-3 col-form-label">模型</label>
                            <div class="col-sm-7">
                                <select class="custom-select custom-select-sm" id="Model" v-model="chat.model">
                                <option v-for="(name, value) in setting.defaultModels" :value="value">{{name}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row align-items-center">
                            <label for="ContextNum" class="col-sm-3 col-form-label">上下文数</label>
                            <div class="col-sm-7">
                                <input type="range" class="custom-range" min="0" max="50" v-model="chat.contextNum">
                            </div>
                            <div class="col-sm-2">
                                <input type="text" class="form-control form-control-sm" id="ContextNum" v-model="chat.contextNum">
                            </div>
                        </div>
                        <div class="form-group row align-items-center">
                            <label for="MaxTokens" class="col-sm-3 col-form-label">最大token数</label>
                            <div class="col-sm-7">
                                <input type="range" class="custom-range" min="1" max="4096" v-model="chat.maxTokens">
                            </div>
                            <div class="col-sm-2">
                                <input type="text" class="form-control form-control-sm" id="MaxTokens" v-model="chat.maxTokens">
                            </div>
                        </div>
                        <div class="form-group row align-items-center">
                            <label for="Temperature" class="col-sm-3 col-form-label">创造性</label>
                            <div class="col-sm-7">
                                <input type="range" class="custom-range" min="0" max="1" step="0.1" v-model="chat.temperature">
                            </div>
                            <div class="col-sm-2">
                                <input type="text" class="form-control form-control-sm" id="Temperature" v-model="chat.temperature">
                            </div>
                        </div>
                    </form>
                </div>

                <!-- 角色设置 -->
                <div class="center-box border shadow slide-up" @click.stop v-show="box.showRoleInfo">
                    <h4 class="mb-4">角色设置</h4>
                    <form enctype="multipart/form-data" id="avatarForm" class="mb-3">
                        <img :src="roleInfo.avatar" height="64" width="64" class="rounded-pill">
                        <label class="btn btn-success btn-sm uploadBtn font-size-14 ml-4">
                        上传头像
                        <input type="file" name="avatar" id="avatar" class="d-none" accept="image/*" @change="uploadAvatar">
                        </label>
                    </form>
                    <div class="form-group row align-items-center">
                        <label for="name" class="col-sm-3 col-form-label">昵称</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control form-control-sm" id="name" v-model="roleInfo.name">
                        </div>
                    </div>
                    <div class="form-group row align-items-center">
                        <label for="desc" class="col-sm-3 col-form-label">简介</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control form-control-sm" id="desc" v-model="roleInfo.desc">
                        </div>
                    </div>
                    <div class="form-group row align-items-center">
                        <label for="greeting" class="col-sm-3 col-form-label">问候语</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control form-control-sm" id="greeting" v-model="roleInfo.greeting">
                        </div>
                    </div>
                    <div class="form-group row align-items-center">
                        <label for="rolePrompt" class="col-sm-3 col-form-label">角色指令</label>
                        <div class="col-sm-9">
                            <textarea class="form-control form-control-sm" id="rolePrompt" v-model="roleInfo.rolePrompt"></textarea>
                        </div>
                    </div>
                    <div class="d-flex justify-content-center mt-4">
                        <div>
                            <button type="submit" class="btn btn-secondary" @click="hideAll">取消</button>
                            <button type="submit" class="btn btn-success ml-2" @click="saveRole">保存</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 发送方式 -->
            <div class="send-method-box shadow" @click.stop v-show="box.showSendMethod">
                <a class="dropdown-item iconfont" @click="sendMethodSelect('Enter')" :class="{'alert-success':sendMethod=='Enter', selected:sendMethod=='Enter', 'pl-4': sendMethod!='Enter'}">Enter发送</a>
                <a class="dropdown-item iconfont" @click="sendMethodSelect('Ctrl-Enter')" :class="{'alert-success':sendMethod=='Ctrl-Enter', selected:sendMethod=='Ctrl-Enter', 'pl-4': sendMethod!='Ctrl-Enter'}">Ctrl+Enter发送</a>
            </div>

            <div class="more-box shadow border-top" style="z-index:10000" @click.stop v-show="box.showMore" :class="{'slide-up':box.showMore}">
                <a class="dropdown-item py-2 px-4 cursor-pointer" @click="resetSystem">重置系统</a>
            </div>
            <div class="page-box w-100 h-100 bg-light" @click.stop v-if="module==='me'">
                <div class="header d-flex justify-content-between bg-white">我的信息</div>
                <div class="w-100 body">
                    <iframe class="iframe" id="me" :src="iframe.user"></iframe>
                </div>
            </div>
            
            <div class="page-box w-100 h-100 bg-light" @click.stop v-if="module==='user'">
                <div class="header d-flex justify-content-between bg-white">用户中心</div>
                <div class="w-100 body">
                    <iframe class="iframe" id="user" :src="iframe.user_info"></iframe>
                </div>
            </div>
            <div class="page-box w-100 h-100" v-if="module==='market'">
                <div class="header d-flex justify-content-between">应用市场</div>
                <div class="w-100 body">
                    <iframe class="iframe" id="market" :src="iframe.market"></iframe>
                </div>
            </div>

            <div class="page-box w-100 h-100 bg-light" @click.stop v-if="module==='command'">
                <div class="header d-flex justify-content-between bg-white">指令中心</div>
                <div class="w-100 body">
                    <iframe class="iframe" id="command" :src="iframe.command"></iframe>
                </div>
            </div>
        </div>
    </div>
    <div style="display: none;">
        <script type="text/javascript" src="https://js.users.51.la/21778813.js?v=1.0.0"></script>
    </div>
    <script src="./static/ai/js/highlight.min.js?v=1.0.0"></script>
    <script src="./static/ai/js/markdown-it.min.js?v=1.0.0"></script>
    <script type="text/javascript" src="./static/ai/js/vue.global.js?v=1.0.0"></script>
    <script type="text/javascript" src="./static/ai/js/app.js?v=1.0.0"></script>
    <script src="./static/ai/js/confetti.browser.min.js?v=1.0.0"></script>
    <link rel="stylesheet" href="./static/ai/css/highlight.min.css?v=1.0.0">
    <link rel="stylesheet" href="./static/ai/css/github-markdown.min.css?v=1.0.0">

</body>

</html>